<template>
  <el-main>
    <div class="scale">
      <el-button
        icon="el-icon-plus"
        size="small"
        @click="scale += 10"
        :disabled="scale >= 150"
        circle
      ></el-button>
      <span>{{ scale }}%</span>
      <el-button
        icon="el-icon-minus"
        size="small"
        @click="scale -= 10"
        :disabled="scale <= 40"
        circle
      ></el-button>
      <el-button @click="validate" :disabled="!processType">校验流程</el-button>
    </div>
    <div style="text-align: center">
      <el-select
        :value="processType"
        placeholder="请选择"
        @change="selectProcessType"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="design" :style="'transform: scale(' + scale / 100 + ');'">
      <process-tree ref="process-tree" @selectedNode="nodeSelected" />
    </div>
    <div style="text-align: center">
      <el-button>取消</el-button>
      <el-button type="primary" @click="validate" :disabled="!processType">保存并启用</el-button>
    </div>
    <el-drawer
      :title="'设置' + selectedNode.name"
      :visible.sync="showConfig"
      size="500px"
      direction="rtl"
      :modal="false"
      destroy-on-close
    >
      <div class="node-config-content">
        <node-config @cancel="cancelFn"/>
      </div>
    </el-drawer>
  </el-main>
</template>

<script>
import ProcessTree from "./ProcessTree.vue";
import NodeConfig from "./node/config/NodeConfig";
import { mapState } from "vuex";
export default {
  name: "ProcessDesign",
  components: { ProcessTree, NodeConfig },
  data() {
    return {
      scale: 100,
      showConfig: false,
      options: [
        { label: "薪资发放", value: "payrollCredit" },
        { label: "企业发红包", value: "redPacket" },
        { label: "企业发红包协议", value: "redPacketSign" },
        { label: "批量工资卡开户", value: "openCard" },
        { label: "财务支付协议管理", value: "agencySign" },
      ],
    };
  },
  computed: {
    ...mapState(["processType"]),
    selectedNode() {
      return this.$store.state.selectedNode;
    },
    dom() {
      return this.$store.state.design.process;
    },
  },
  methods: {
    validate() {
      console.log("保存===>", this.dom);
      this.$refs["process-tree"].validateProcess();
    },
    nodeSelected(node) {
      if (node.type === "ROOT") {
        if (this.processType !== "payrollCredit") return;
      } else if (node.type === "APPROVAL") {
        if (!this.processType) return;
      }
      this.showConfig = true;
    },
    selectProcessType(val) {
      this.$store.commit("setProcessType", val);
    },
    cancelFn() {
      this.showConfig = false;
    }
  },
  watch: {
    selectedNode: {
      deep: true,
      handler(node) {
        this.$refs["process-tree"].nodeDomUpdate(node);
      },
    },
  },
};
</script>

<style lang="less" scoped>
.design {
  margin-top: 100px;
  display: flex;
  transform-origin: 50% 0px 0px;
}

.scale {
  z-index: 999;
  position: fixed;
  top: 80px;
  right: 40px;

  span {
    margin: 0 10px;
    font-size: 15px;
    color: #7a7a7a;
    width: 50px;
  }
}

.node-config-content {
  padding: 0 20px 20px;
}

/deep/ .el-drawer__body {
  overflow-y: auto;
}
</style>
